<template>
  <div>
    <!--查询-->
    <el-form style="margin-top: 20px;margin-left: 20px" :inline="true" :model="tbUserVo"  ref="tbUserVo"  class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="6">
      <el-form-item label="部门" >
        <el-select v-model="tbUserVo.departmentId" prop="departmentId" >
          <el-option v-for="a in dep" :label="a.name" :value="a.id">
            {{a.name}}
            <!--显示多少人数-->
            <el-tag disable-transitions style="float: right">
              {{a.count==null?0:''}}
              {{a.count}}人
            </el-tag>
          </el-option>
        </el-select>
      </el-form-item>
      </el-col>
        <el-col :span="6">
        <el-form-item label="用户名" prop="username">
          <el-input  v-model="tbUserVo.username" placeholder="用户名..."  ></el-input>
        </el-form-item></el-col>
        <el-col :span="6">
        <el-form-item label="邮箱" prop="email" >
          <el-input v-model="tbUserVo.email" placeholder="如：3306@qq.com"></el-input>
        </el-form-item></el-col>
        <el-col :span="6">
        <el-form-item label="性别" prop="sex" >
          <el-radio v-model="tbUserVo.sex" :label="0">男</el-radio>
          <el-radio v-model="tbUserVo.sex" :label="1">女</el-radio>
          <!--3表示无sex-->
          <el-radio v-model="tbUserVo.sex" :label="3">全部</el-radio>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
      <el-form-item label="昵称" prop="nickname" >
          <el-input style="width: 195px" v-model="tbUserVo.nickname" placeholder="如：宝藏男孩..."></el-input>
      </el-form-item>
        </el-col>
        <el-col :span="10">
      <el-form-item >
        <el-button type="info" icon="el-icon-refresh" style="margin-left: 20px" @click="resetForm('tbUserVo')">重置</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="success" icon="el-icon-plus" @click="adduser">添加</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="info" icon="el-icon-upload2" @click="downloadUsers">导出</el-button>
      </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <!--数据展示-->
  <el-table
    :data="tableData"
    ref="singleTable"
    border
    style="margin-left:20px;margin-right:20px;border-radius: 25px"
   >
    <el-table-column
      prop="id"
      label="##"
      width="50">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="110">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="100">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
           <!-- {{scope.row.sex==0?'帅哥':scope.row.sex==1?'美女':'保密'}}-->
            <el-tag type="success" size="medium" v-if="scope.row.sex==0">帅哥</el-tag>
            <el-tag type="warning" size="medium" v-else-if="scope.row.sex==1">美女</el-tag>
            <el-tag size="medium" v-else-if="scope.row.sex==null" type="danger">
              保密
              <i class="el-icon-question"></i>
            </el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="所属部门"
      width="130">
    </el-table-column>
    <el-table-column
      prop="birth"
      label="生日"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="220">
    </el-table-column>
    <el-table-column
      prop="phoneNumber"
      label="电话"
      width="220">
      <template slot-scope="scope">
      <!--  {{scope.row.phoneNumber==null?'手机已被设置为保密':scope.row.phoneNumber}}-->
        <el-tag
          :type="danger"
          v-if="scope.row.phoneNumber==null">
          <span v-if="scope.row.phoneNumber==null" color="red">手机已被设置为保密</span>
        </el-tag>
        <b v-if="scope.row.phoneNumber!=null">{{scope.row.phoneNumber}}</b>
      </template>
    </el-table-column>
    <el-table-column
      prop="status"
      label="是否禁用"
      width="100">
      <template slot-scope="scope">
       <p @click="userStaus(scope.row.id,scope.row.status)">
      <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.status==1" >
      </el-switch>
       </p>
      </template>
    </el-table-column>
    <el-table-column
      style="margin: auto;width: 200px"
      prop="address"
      label="操作">
      <template slot-scope="scope" >
        <!--修改 -->
        <el-button type="primary"  size="mini" icon="el-icon-edit"  @click="startDialog(scope.row)"></el-button>
        <!--删除-->
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeUser(scope.row.id)" ></el-button>
        <!--设置-->
        <el-button type="info" size="mini" icon="el-icon-s-tools" ></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div class="block" style="margin-top: 30px;text-align: center;margin-bottom: 20px">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage+1"
      :page-sizes="[6, 10, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  <!--弹框-->
    <el-dialog style="margin-bottom: 20px"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <el-form ref="form" :model="tbUserVoModfiy" label-width="80px">
        <el-form-item>
          <h1 style="text-align: center">{{modfyUserName==true?'用户修改':'增加用户'}}</h1>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="*用户名">
              <el-input v-model="tbUserVoModfiy.username" :disabled="modfyUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-select v-model="tbUserVoModfiy.departmentId" placeholder="请选择部门">
                <el-option :label="d.name" v-for="d in dep" :value="d.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="*昵称">
              <el-input v-model="tbUserVoModfiy.nickname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex" >
              <el-radio v-model="tbUserVoModfiy.sex" :label="1">美女</el-radio>
              <el-radio v-model="tbUserVoModfiy.sex" :label="0">帅哥</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="*密码" style="width: 90%" :hidden="pwdHide">
          <el-input v-model="tbUserVoModfiy.password"></el-input>
        </el-form-item>

        <el-form-item label="*邮箱" style="width: 90%">
          <el-input v-model="tbUserVoModfiy.email"></el-input>
        </el-form-item>
        <el-form-item label="*联系方式" style="width: 90%" >
          <el-input v-model="tbUserVoModfiy.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <div class="block">
            <el-date-picker
              v-model="tbUserVoModfiy.birth"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="选择头像" :hidden="avaterBollen">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8003/aliOss/uploadFileImage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="tbUserVoModfiy.avatar" :src="tbUserVoModfiy.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from "@/utils/request";
  import { login, logout, getInfo,findByPageOrTbUserVo,findByDepartmentAndCount,removeById,updUser,instUser,updStatusById,downloadUsershttp } from '@/api/user'
  export default {
    data() {
      return {
        //头像框是否显示
        avaterBollen: true,
        //密码框是否显示 增加ture 修改false
        pwdHide:true,
        //用户名是否禁用
        modfyUserName: false,
        //生日
        dateValue:'',
        //是否启用弹框
        dialogVisible: false,
        //部门信息
        dep:[],
        //数据展示集合
        tableData: [],
        //当前页
        currentPage: 1,
        //每页展示最大数目
        size: 6,
        //总条数
        total:0,
        //查询条件
        tbUserVo: {
          departmentId: '',
          //用户名
          username: '',
          //性别
          sex:3,
          //昵称
          nickname:'',
          //邮箱
          email:''
        },
        //弹框属性
        tbUserVoModfiy:{
          //头像路径
          avatar:null,
          id:null,
          username:'',
          departmentId:'',
          nickname:'',
          sex:3,
          email:'',
          phoneNumber:'',
          birth:'',
          password:''
        },

      }
    },
    methods:{
      //头像方法
      handleAvatarSuccess(res, file) {
        //oss 地址赋值
        this.tbUserVoModfiy.avatar = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //导出操作
      downloadUsers(){
        var $this=this;
        if(confirm("你要下载用户信息吗？")){
          //window.open("http://localhost:8001/tbUser/downloadExcel")
          downloadUsershttp($this.tbUserVo).then(res=>{
            debugger
            let blob = new Blob([res], { type: 'application/xlsx' })
            let url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            link.download = '用户信息表.xlsx' // 重命名文件
            link.click()
            URL.revokeObjectURL(url)
          });
        }else {
          return false;
        }
      },
      //用户的禁用操作
      userStaus(id,status){
        var $this=this;
        if(status==0){
          if(confirm("确定取消禁用吗？")){
            if(status==0){
              status=1;
            }else {
              status=0
            }
            updStatusById(id,status).then(res=>{
              $this.findByPage($this.currentPage,$this.size,$this.tbUserVo);
            }).catch(error=>{
              console.log(error)
            })
          }
        }else {
          if(confirm("确定禁用该用户吗？")){
            if(status==0){
              status=1;
            }else {
              status=0
            }
            updStatusById(id,status).then(res=>{
              $this.findByPage($this.currentPage,$this.size,$this.tbUserVo);
            }).catch(error=>{
              console.log(error)
            })
          }
        }
      },
      //弹框的确定操作
      saveUser(){
        this.dialogVisible = false
        var $this=this;
        //如果用户名的框禁用了 则为修改操作 否则为增加操作
        if($this.modfyUserName){
          console.log("修改操作")
          updUser($this.tbUserVoModfiy).then(res=>{
            alert(res.message)
            $this.findByPage($this.currentPage,$this.size,$this.tbUserVo);
          }).catch(error=>{
            console.log(error)
          })
        }else {
          console.log("增加操作")
          instUser($this.tbUserVoModfiy).then(res=>{
            $this.tbUserVoModfiy.avatar=null;
            alert(res.message)
            $this.findByPage($this.currentPage,$this.size,$this.tbUserVo);
          }).catch(error=>{
            console.log(error)
          })
        }
      },
      //开启弹框 修改
      startDialog(row){
        //隐藏头像框
        this.avaterBollen=true;
        //禁用用户名框
        this.modfyUserName=true
       //this.tbUserVoModfiy=row;
        this.tbUserVoModfiy.id=row.id
        this.tbUserVoModfiy.username=row.username
        this.tbUserVoModfiy.departmentId=row.departmentId
        this.tbUserVoModfiy.nickname=row.nickname
        this.tbUserVoModfiy.sex=row.sex
        this.tbUserVoModfiy.email=row.email
        this.tbUserVoModfiy.phoneNumber=row.phoneNumber
        this.tbUserVoModfiy.birth=row.birth

        this.dialogVisible=true;
        this.tbUserVoModfiy.id=row.id;
      },
      //新增跳转
      adduser(){
        //显示头像框
        this.avaterBollen=false;
        //启动密码框
        this.pwdHide=false;
        this.dialogVisible=true;
        //容许写入用户名
        this.modfyUserName=false;
        //this.$router.push({path:'addUser'})
      },
      //弹出框关闭 用于修改
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //删除方法
      removeUser(id){
        var $this=this;
        if(confirm("确定删除吗？此删除为永久删除！")){
          removeById(id).then(req=>{
            $this.findByPage(1,$this.size)
            findByDepartmentAndCount().then(req=>{
              this.dep=req.data
            })
          }).catch(error=>{
            console.log(error)
          })
        }else {
          return false;
        }
      },
      //重置查询条件
      resetForm(formName) {
        this.tbUserVo.departmentId=''
        this.$refs[formName].resetFields();
      },
      //查询触发的方法
      onSubmit() {
        this.findByPage(1,this.size,this.tbUserVo);
        console.log('submit!');
      },
      //每页条数
      handleSizeChange(val) {
        this.findByPage(this.currentPage,val,this.tbUserVo)
        console.log(`每页 ${val} 条`);
      },
      //当前页数
      handleCurrentChange(val) {
        this.findByPage(val,this.size,this.tbUserVo)
        console.log(`当前页: ${val}`);
      },
      //数据展示
      findByPage(current,size,userVo){
        //alert("current"+current+"==size"+size)
        var $this=this;
        findByPageOrTbUserVo(current,size,userVo).then(res=>{
          //alert(JSON.stringify(res))
          //alert("=="+JSON.stringify(res.data));
          $this.tableData=res.data.users;
          $this.total=res.data.total
          $this.currentPage=res.data.current
          $this.size=res.data.size
        }).catch(error=>{
          $this.tableData=[];
          $this.total=0;
        })
      }
    },
    created() {
      //默认展示前五条数据
      this.findByPage(this.currentPage,this.size,this.tbUserVo);
      //查询的部门下拉框
      findByDepartmentAndCount().then(req=>{
        this.dep=req.data
      });
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
